<style>
    .topshopcart .cart-list {
        display: block;
        padding: 6px 12px;
    }
    .topshopcart .cart-count {
        background: #f6f6f6;
        color: #31373c;
        font-size: 12px;
        height: 40px;
        line-height: 40px;
        padding: 10px 15px 10px 20px;
    }
    .topshopcart .cart-item {
        border-top: 1px solid #ddd;
        display: block;
        height: 72px;
        line-height: 72px;
        padding: 6px 0;
    }
    .topshopcart .cart-item:first-child {
        border-top: none;
    }
    .mod-header a {
        color: #bfbfbf;
        font-size: 12px;
    }
    .topshopcart .cart-item .cart-item-price {
        color: #333;
        float: left;
        height: 100%;
        text-align: right;
        width: 75px;
    }
    .topshopcart .cart-item .cart-item-num {
        color: #666;
        float: left;
        text-align: center;
        width: 30px;
    }
    .mod-header a {
        color: #bfbfbf;
        font-size: 12px;
    }
    .topshopcart .cart-item .cart-item-del {
        background: url(https://p.ssl.qhimg.com/t01f2d40797748448d3.png) no-repeat 0 -59px;
        float: left;
        height: 16px;
        margin-top: 28px;
        width: 16px;
    }

    .topshopcart .cart-item .cart-item-img img {
        float: left;
        height: 72px;
        width: 72px;
    }

    .topshopcart .cart-item .cart-item-text {
        color: #666;
        float: left;
        line-height: 20px;
        padding-left: 15px;
        width: 140px;
    }
    .topshopcart .cart-item .cart-item-text strong {
        display: table-cell;
        font-weight: 400;
        height: 72px;
        overflow: hidden;
        vertical-align: middle;
    }
    .topshopcart .cart-buy {
        background: #30ab38;
        border-radius: 2px;
        color: #fff;
        float: right;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 120px;
    }
    .topshopcart .cart-count b {
        color: #e94c30;
        font-weight: 400;
    }
</style>


<div class="header">
    <!--吸顶 start-->
    <a class="xiding" style="width: 100%;height: 60px;display: none;" href="goodsList.html" target="_blank";><img src="http://p0.qhimg.com/t01330e10eafbd3f5fd.jpg"></a>
    <script>
        /*xiding*/
        $(window).scroll(function() {
            //alert('1')
            var _scrollTop = $(this).scrollTop();
            if (_scrollTop >111) {
                $('.xiding').css({"position":"fixed","top":"0","display":"block"});
            }else {
                $('.xiding').css("display","none");
            }
        })
    </script>
    <!--吸顶 over-->

    <!--tip start-->
    <div class="mod-dialog">
        <div class="dialog-nav">
            <span class="dialog-title">提示</span>
            <a href="#" onclick="return false" class="dialog-close"></a>
        </div>
        <div class="dialog-main"><div class="dialog-content"><p id="tip-content">购买数量为1到20之间的整数!</p></div><div class="dialog-console clearfix_new"><a class="console-btn-confirm" href="#" onclick="return false;">确定</a></div></div></div>

    <div class="mod-dialog-bg" style=""></div>

    <script>
      function tip(content){
          $('#tip-content').text(content);
          $('.mod-dialog-bg').css("display","block");
          $('.mod-dialog').css("display","block");

          $('.dialog-close').click(function(e){
              $(this).parent().parent().parent().find('.mod-dialog-bg').hide();
              $(this).parent().parent('.mod-dialog').css("display","none");

          })
          $('.console-btn-confirm').click(function(e){
              $(this).parent().parent().parent().parent().find('.mod-dialog-bg').css("display","none");
              $(this).parent().parent().parent('.mod-dialog').css("display","none");
          })
      }
    </script>
    <!--tip over-->

    <!--youxiajiao start-->
    <div class="sideBar">
        <ul>
            <li style="background-position-y: 0px;">
                <a target="_blank" href="http://mall.360.com/feedback">用户体验</a>
            </li>
            <li class="weixin" id="weixin" style="background-position-y: -80px;">
                <a href="javascript:;">微信关注</a>
                <div class="hidden" id="weixin-hidden">
                    <span class="arrowr-bg" style="top: 102px;"></span>
                    <span class="arrowr" style="top: 103px;"></span>
                    <img src="http://p7.qhimg.com/t01d06b994b8798623c.jpg">
                    <p>
                        扫码关注官方微信
                        <br>
                        先人一步知晓促销活动
                    </p>
                </div>
            </li>
            <li class="shouji" id="shouji" style="background-position-y: -120px;">
                <a href="javascript:;">手机商城</a>
                <div class="hidden" id="shouji-hidden">
                    <span class="arrowr-bg" style="top: 142px;"></span>
                    <span class="arrowr" style="top: 143px;"></span>
                    <img src="http://p1.qhimg.com/t013df41dbfac4d5924.jpg">
                    <p>
                        手机商城首次登陆
                        <span>送5元现金券</span>
                    </p>
                </div>
            </li>
            <li style="background-position-y: -160px;" class="goTop" id="goTop">
                <a href="javascript:;">返回顶部</a>
            </li>
        </ul>
    </div>
    <script>
        $(function(){
            var odiv = document.getElementById("goTop");
            var timer = null;
            odiv.onclick = function (){
                clearInterval(timer);
                timer = setInterval(function (){
                    var current = document.documentElement.scrollTop || document.body.scrollTop || 0; //兼容
                    if(current === 0){
                        clearInterval(timer);
                        $('.goTop').hide();
                        return;
                    }

                    if(current < 150){
                        $('.goTop').hide()
                    } else {
                        $('.goTop').show()
                    }
                    var dis = 0 - current;
                    var speed = dis > 0? Math.ceil(dis/8):Math.floor(dis/8);

                    document.documentElement.scrollTop = current + speed;
                    document.body.scrollTop = current + speed;
                }, 30);
            }

            //刚开始打开页面 时 判断下
            var _scrollTop = $(window).scrollTop() ;

            if(_scrollTop>300){
                $('.goTop').show()
            } else {
                $('.goTop').hide()
            }
            //window scroll shijian
            $(window).scroll(function(){
                var _scrollTop = $(window).scrollTop() ;

                if(_scrollTop>500){
                    $('.goTop').show()
                } else {
                    $('.goTop').hide()
                }
            })
        })
    </script>
    <!--youxiajiao over-->

    <!--h1-->
    <div class="topbox" id="h1">
        <div class="top-container">
            <ul>
                <li class="topbox-item leftitem" style="margin-left:-10px">
                    <a href="#">企业采购</a>
                </li>
                <li class="topbox-item leftitem">
                    <a href="http://mall.360.com/help" target="_blank">帮助中心</a>
                </li>
                <li class="topbox-item leftitem">
                    <a class="js-connect" href="javascript:;">收藏本站</a>
                </li>
                <li class="topbox-item leftitem">
                    <a href="http://mall.360.com/help/product" target="_blank">商品入驻</a>
                </li>
                <li class="topbox-item leftitem">
                    <a href="http://watch.mall.360.com/apply" target="_blank">老人手环申请</a>
                </li>
                <li class="topbox-item leftitem">
                    <a target="_blank" href="http://mall.360.com/xia/zai" class="telshop">
                        <i></i>
                        手机360商城
                    </a>
                </li>
                <li class="topbox-item rightitem" style="margin-right:-10px">
                    <a href="goodsList.html" target="_blank">商品列表</a>
                </li>
                <li class="topbox-item rightitem hassx">
                    <a href="detail.html" target="_blank" >商品详情</a>
                </li>
                <li class="topbox-item rightitem navloginbox">
                    <div class="loginbefore nloginWrap" id="loginbefore">
                        <a class="btn-login-pop" href="login.html" target="_blank">登录</a>
                        <a class="btn-reg-pop"  href="register.html" target="_blank">注册</a>
                    </div>
                    <div class="loginafter loginWrap" id="loginafter" style="display:none;position: relative;margin-right: 109px; ">
                        <span class="top-uname popUsername" id="login-usn" style="position: absolute;top: 0;left: 0;">admin</span>
                        <span  id="after-hidden" style="position: absolute; top:36px;left: 0;background: #fff;">注销</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--h2-->
    <a class="h2" id="h2" href="index.html" target="_blank">
        <img src="http://p0.qhimg.com/t01330e10eafbd3f5fd.jpg">
    </a>
    <!--h3-->
    <div class="top-container" id="h3">
        <div class="header-logo">
            <a href="index.html"><img src="http://p6.qhimg.com/t013cfce5d46cdb1b5f.png"></a>
            <a href="index.html">
                <img src="http://p2.qhimg.com/t010c368aee6f0c605e.gif">
            </a>
        </div>
        <div class="header-tools">
            <div class="suggest-box">
                <form id="__mall_search_form__" action="">
                    <div style="position: relative;display: inline-block;">
                        <input type="text" id="__mall_search_kw__" class="suggest" name="q" autocomplete="off" placeholder="360智能摄像机">

                        <!--placeholder-->
                        <ul id="search-suggest-1470052377169" class="__mall_suggest__" style="width: 462px; position: absolute; top: 42px; left: 0; z-index: 999999; ">
                            <li data-monitor="home_search_xiala02" class=""><div class="sug-item"><em></em>行车记录仪</div><div class="desc">约有15件</div></li><li data-monitor="home_search_xiala03" class="hover"><div class="sug-item"><em></em>巴迪龙儿童手表</div><div class="desc">约有179件</div></li><li data-monitor="home_search_xiala04" class=""><div class="sug-item"><em></em>智能摄像机</div><div class="desc">约有630件</div></li><li data-monitor="home_search_xiala05" class=""><div class="sug-item"><em></em>智能手环</div><div class="desc">约有655件</div></li><li data-monitor="home_search_xiala06"><div class="sug-item"><em></em>智能投影仪</div><div class="desc">约有640件</div></li><li data-monitor="home_search_xiala07"><div class="sug-item"><em></em>坚果家庭影院</div><div class="desc">约有22件</div></li><li data-monitor="home_search_xiala08"><div class="sug-item"><em></em>魔调运动耳机</div><div class="desc">约有446件</div></li><li data-monitor="home_search_xiala09"><div class="sug-item"><em></em>小欧电动牙刷</div><div class="desc">约有182件</div></li><li data-monitor="home_search_xiala10"><div class="sug-item"><em></em>苏泊尔家电</div><div class="desc">约有24件</div></li></ul>

                        <script>
                            $('#__mall_search_kw__').mousedown(function(){
                                $('.__mall_suggest__').show();
                            })
                            $('#__mall_search_kw__').blur(function(){
                                $('.__mall_suggest__').hide();
                            })
                            $('.__mall_suggest__ li').mouseover(function(){
                                $(this).addClass("hover").siblings().removeClass("hover");
                            })
                            $('.__mall_suggest__ li').mousedown(function(e){
                                if(1 == e.which){
                                    $(this).parent().prev('input').val($(this).find('.sug-item').text());
                                    $(this).parent().hide();
                                }else {return false;}
                            })
                        </script>
                    </div>
                    <input type="submit" value="" class="search-btn" id="__mall_search_btn__">
                </form>
            </div>
            <div class="topshopcart" id="topshopcart">
                <a href="carts.html" target="_blank" class="header-cart" id="header-cart">
                    <i class="icon"></i>
                    我的购物车
                    <span class="cart-size" id="cart-size">(0)</span>
                </a>
                <div class="header-cart-popup pop-show-tip" id="cart-hidden" style="z-index: 88888;">
                    <div class="cart-tips" id="cartips" style="display: none;">
                      您的购物车空空如也...
                    </div>

                    <!--<div class="cart-info"></div>-->
                    <div class="cart-info">
                        <ul class="cart-list" id="small-cart">
                           <!-- <li class="cart-item">&lt;!&ndash;                   &ndash;&gt;
                                <a href="http://mall.360.com/shop/item?item_id=578f42cae059bf7e48e4d4f5" target="_blank" class="cart-item-img">
                                    <img src="http://p9.qhimg.com/dr/72_72_/t01ef59317747b55cfd.webp">
                                    <span class="cart-item-text"><strong>Ticwatch 2 智能手表经典版（银色精钢表头配 珠光粉尖尾真皮表带）</strong></span>
                                </a><span class="cart-item-price">
                                <span class="yen">¥</span>1299.00</span>
                                <span class="cart-item-num"> ×1</span>
                                <a class="cart-item-del" href="#" onclick="return false;" data-id="578f42cae059bf7e48e4d4f5" data-monitor="home_title_shopcartdelete"></a>
                            </li>-->
                        </ul>
                        <div class="cart-count">
                            <span style="color:#31373c;">共<b id="totalNum">1</b>件商品 总计：
                                <b id=""><span class="yen" style="color:#e94c30;">¥</span>
                                <span id="totalPri"> 1299</span>
                                 </b></span><a class="cart-buy" href="carts.html" target="_blank">去购物车</a></div></div>
                </div>
            </div>
        </div>
    </div>
    <!--h4-->
    <div class="navbox" id="navbox">
        <div class="top-container" id="navbox-container">
            <div id="move-color"></div>
            <ul class="navbar column-list clearfix">
                <li class="top-item topfirst">
                    <a href="javascript:;" target="_blank">全部智能酷品</a>
                    <!--hidden menu-->
                </li>
                <li class="top-item" data-type="1">
                    <a href="javascript:;" target="_blank">手机</a>
                    <!---->
                    <div class="sublistbox"><!--导航下拉 start-->
                        <ul class="sub-nav-list">

                            <li>
                                <a href="##" >
                                    <img src="http://p2.qhimg.com/dr/132_132_/t017ea859bc6f894bbb.webp">
                                    <span>360手机N4S全网通版</span>
                                    <i>1199元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##">
                                    <img src="http://p4.qhimg.com/dr/132_132_/t01a45e89f48739b01f.webp">
                                    <span>360手机N4全网通</span>
                                    <i>999元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p5.qhimg.com/dr/132_132_/t0163323dc3449826e0.webp">
                                    <span>360手机f4移动4G</span>
                                    <i>599元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p5.qhimg.com/dr/132_132_/t0163323dc3449826e0.webp">
                                    <span>360手机f4全网通</span>
                                    <i>799元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p1.qhimg.com/dr/132_132_/t01f93cf39791e37b63.webp">
                                    <span>奇酷青春版双4G</span>
                                    <i>799元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" #>
                                    <img src="http://p9.qhimg.com/dr/132_132_/t015a23549cdf819b9d.webp">
                                    <span>奇酷旗舰版全网通</span>
                                    <i>2499元</i>
                                </a>
                            </li>

                        </ul></div>

                </li>
                <li class="top-item topnew" data-type="2">
                    <a href="javascript:;" target="_blank">行车记录仪</a>
                    <!---->

                </li>
                <li class="top-item" data-type="3">
                    <a href="javascript:;">儿童手表</a>
                    <!---->
                    <div class="sublistbox"><!--导航下拉 start-->
                        <ul class="sub-nav-list">

                            <li>
                                <a href="##" >
                                    <img src="http://p2.qhimg.com/dr/132_132_/t017ea859bc6f894bbb.webp">
                                    <span>360手机N4S全网通版</span>
                                    <i>1199元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##">
                                    <img src="http://p4.qhimg.com/dr/132_132_/t01a45e89f48739b01f.webp">
                                    <span>360手机N4全网通</span>
                                    <i>999元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p5.qhimg.com/dr/132_132_/t0163323dc3449826e0.webp">
                                    <span>360手机f4移动4G</span>
                                    <i>599元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p5.qhimg.com/dr/132_132_/t0163323dc3449826e0.webp">
                                    <span>360手机f4全网通</span>
                                    <i>799元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p1.qhimg.com/dr/132_132_/t01f93cf39791e37b63.webp">
                                    <span>奇酷青春版双4G</span>
                                    <i>799元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p9.qhimg.com/dr/132_132_/t015a23549cdf819b9d.webp">
                                    <span>奇酷旗舰版全网通</span>
                                    <i>2499元</i>
                                </a>
                            </li>

                        </ul></div>

                </li>
                <li class="top-item" data-type="4">
                    <a href="javascript:;">智能摄像机</a>

                </li>
                <li class="top-item" data-type="5">
                    <a href="javascript:;" target="_blank">路由器</a>
                    <!---->
                    <div class="sublistbox"><!--导航下拉 start-->
                        <ul class="sub-nav-list">

                            <li>
                                <a href="##" >
                                    <img src="http://p2.qhimg.com/dr/132_132_/t017ea859bc6f894bbb.webp">
                                    <span>360手机N4S全网通版</span>
                                    <i>1199元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##">
                                    <img src="http://p4.qhimg.com/dr/132_132_/t01a45e89f48739b01f.webp">
                                    <span>360手机N4全网通</span>
                                    <i>999元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p5.qhimg.com/dr/132_132_/t0163323dc3449826e0.webp">
                                    <span>360手机f4移动4G</span>
                                    <i>599元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p5.qhimg.com/dr/132_132_/t0163323dc3449826e0.webp">
                                    <span>360手机f4全网通</span>
                                    <i>799元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p1.qhimg.com/dr/132_132_/t01f93cf39791e37b63.webp">
                                    <span>奇酷青春版双4G</span>
                                    <i>799元</i>
                                </a>
                            </li>

                            <li>
                                <a href="##" >
                                    <img src="http://p9.qhimg.com/dr/132_132_/t015a23549cdf819b9d.webp">
                                    <span>奇酷旗舰版全网通</span>
                                    <i>2499元</i>
                                </a>
                            </li>

                        </ul></div>

                </li>
                <li class="top-item" data-type="6">
                    <a href="javascript:;">智品牌</a>
                </li>
                <li class="top-item" data-type="7">
                    <a href="javascript:;">一元夺宝</a>
                </li>
                <li class="top-item topfree" data-type="8">
                    <a href="javascript:;">试用</a>
                </li>
                <li class="top-item" data-type="9">
                    <a href="javascript:;">社区</a>
                </li>
            </ul>
        </div>
    </div>
    <!--header over-->
</div>
<script>
    /*
     header js h4 show hide
     * */
    $(".sublistbox").parent("li").hover(
            function(){
                $(this).find(".sublistbox").show();
            },
            function(){
                $(this).find(".sublistbox").hide();
            }
    )
    /*move color*/
    var oListwarp=document.getElementById('navbox-container');
    var aLi=oListwarp.children[1].children;
    var oMove = document.getElementById('move-color');

    var nowIndex=1;/*record li index*/
    for(var i =1;i<aLi.length;i++){
        aLi[i].index=i;
        //一系列 事件 处理
        aLi[i].onmousemove=function(){
            var left=aLi[this.index].offsetLeft;
            //console.log(left)
            oMove.style.width=aLi[this.index].offsetWidth + 'px';
            oMove.style.display = 'block';
            move(oMove,'left',left)
        }
        aLi[i].onmouseout=function(){
            var left=aLi[nowIndex].offsetLeft;
            oMove.style.display = 'block';
            oMove.style.width=aLi[nowIndex].offsetWidth + 'px';

            move(oMove,'left',left)
        }
        aLi[i].onclick=function(){

            nowIndex=this.index;

            for(var i=1;i<aLi.length;i++){
                aLi[i].id =''
            }
            aLi[nowIndex].id='act';
        }
    }
    /*cookie*/
    //get date
    var cartName =  getCookie("loginedUser");
    if(cartName  == "") {//
        cartName = 'admin';
    }
    //console.log(cartName);
    var goods = $.cookie('mycart'+cartName) ?JSON.parse($.cookie('mycart'+cartName)) :{};
    $('#cart-size').html(getJsonLength(goodsId, goods));

    //使用数据
    //拼接字符串
    var html = '';
   var totalPrice = 0.00;
    var totalNum = 0;
    for(var goodsId in goods){
        html += '<li class="cart-item" id="'+ goods[goodsId].id + '"><a href="javascript:;" target="_blank" class="cart-item-img"><img src=" '+goods[goodsId].pic+' "><span class="cart-item-text"><strong>'
        html += goods[goodsId].name;
        html += '</strong></span></a><span class="cart-item-price" id=""><span class="yen">¥</span><span id="cart-item-price"> ';
        html += goods[goodsId].price;
        html += '</span></span><span class="cart-item-num" id=""> ×<span id="cart-item-num" >';
        html += goods[goodsId].num;
        html += '</span></span><a class="cart-item-del" href="javascript:;" ></a></li> ';
       totalNum += parseFloat(goods[goodsId].num);
       totalPrice += parseFloat(goods[goodsId].price) * parseFloat(goods[goodsId].num)
    }
    //进入页面时 加载
    $('#small-cart').html(html);
   $('#totalNum').html(totalNum);
       // getTotalNum();
    $('#totalPri').html(totalPrice.toFixed(2));
       // getTotalPrice();
    /*
     * login 注销
     * */
    // 获取已登录的用户的cookie
    var loginedUser = getCookie("loginedUser");
    if(loginedUser !== ""){// 如果存在，则说明有用户已登录成功，界面显示欢迎，同时将请登录字样去除
        /* $('.loginbefore ').css("display","none");*/
        $('#loginbefore ').hide();
        $('#loginafter ').show();
        $('#login-usn').html( loginedUser);

        var logoutA = document.getElementById("after-hidden");
        logoutA.onclick = function (){
            setCookie('loginedUser', "", -1);
            $('#loginbefore ').show();
            $('#loginafter ').hide();
            $('#login-usn').html("admin" );
        }
    }

    /*点击删除*/
    $('.cart-item-del').click(function(){
        var goodsId = $(this).parent().attr('id');
        $(this).parent().remove();
        console.log(goodsId)
        var goods = JSON.parse($.cookie('mycart'+cartName));
        goods[goodsId] = undefined;
        $.cookie('mycart'+cartName, JSON.stringify(goods), {expires: 7, path: '/'});
        console.log(JSON.parse($.cookie('mycart'+cartName)));
        getTotalNum();
        getTotalPrice();
    })

    function getTotalPrice(){
        var alis = $('.cart-item');
        var no = 0;
        var pri = 0;
        var totalPric = 0;//小计
        for (var i = 0; i < alis.length; i++) {
            pri = parseFloat($(alis[i]).find('#cart-item-price').text());
            no =  parseFloat($(alis[i]).find('#cart-item-num').text());
            totalPric  += pri * no;
        }
       $('#totalPri').text(totalPric.toFixed(2));
    }

    function  getTotalNum(){
        var lis = $('.cart-item');
        var num = 0;
        var totalNo = 0;//小计
        for (var i = 0; i < lis.length; i++) {
            num = parseFloat($(lis[i]).find('#cart-item-num').html());
            //console.log(num)
            totalNo += num;
        }
       $('#totalNum').text(totalNo);
    }
</script>